<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

<ui:composition template="/template.xhtml" >

    <ui:define name="titulo" >
        Ingreso al sistema
    </ui:define>

    <ui:define name="contenido" >
                        
        <h:form prependId="false">
                                
            <p:menubar>
        <p:submenu label="File" icon="ui-icon-document">
            <p:submenu label="New" icon="ui-icon-contact">
                <p:menuitem value="Project" url="#" />
                <p:menuitem value="Other" url="#" />
            </p:submenu>
            <p:menuitem value="Open" url="#" />
            <p:separator />
            <p:menuitem value="Quit" url="#" />
        </p:submenu>
 
        <p:submenu label="Edit" icon="ui-icon-pencil">
            <p:menuitem value="Undo" url="#" icon="ui-icon-arrowreturnthick-1-w" />
            <p:menuitem value="Redo" url="#" icon="ui-icon-arrowreturnthick-1-e" />
        </p:submenu>
 
        <p:submenu label="Help" icon="ui-icon-help">
            <p:menuitem value="Contents" url="#" />
            <p:submenu label="Search" icon="ui-icon-search">
                <p:submenu label="Text">
                    <p:menuitem value="Workspace" url="#" />
                </p:submenu>
                <p:menuitem value="File" url="#" />
            </p:submenu>
        </p:submenu>
 
        <p:submenu label="Actions" icon="ui-icon-gear">
            <p:submenu label="Ajax" icon="ui-icon-refresh">
                <p:menuitem value="Save" actionListener="#{menuView.save}" icon="ui-icon-disk" update="messages"/>
                <p:menuitem value="Update" actionListener="#{menuView.update}" icon="ui-icon-arrowrefresh-1-w" update="messages"/>
            </p:submenu>
            <p:submenu label="Non-Ajax" icon="ui-icon-newwin">
                <p:menuitem value="Delete" actionListener="#{menuView.delete}" icon="ui-icon-close" update="messages" ajax="false"/>
            </p:submenu>
        </p:submenu>
 
        <p:menuitem value="Quit" url="http://www.primefaces.org" icon="ui-icon-close" />
 
        <f:facet name="options">
            <p:inputText style="margin-right:10px" placeholder="Search"/>
            <p:commandButton type="button" value="Logout" icon="ui-icon-extlink" />
        </f:facet>
        </p:menubar>
            <p:tab title="Menú principal" >
                
                <p:tabView value="#{principalBean.menuPrincipal}" var="mp" orientation="left" style="min-height: 400px;">
                                
                        <p:tab title="#{mp.nombre}" >

                            <p:accordionPanel value="#{mp.menuItem}" var="m1" multiple="true">

                                <p:tab title="#{m1.nombre}">
                                    
                                    <!-- Menu item-->                                    
                                    <h:outputLink  value="#{m1.url}.jsf" target="_blank" rendered="#{empty m1.menuItem}" >                                                   
                                        <div class="menuItem menutipo#{m1.tipo}" >  
                                            
                                            #{m1.nombre}                                             
         
                                        </div>
                                    </h:outputLink>

                                    <ui:repeat value="#{m1.menuItem}" var="m2">       

                                       <!-- Menu item-->
                                       <h:outputLink  value="#{m2.url}.jsf" target="_blank" rendered="#{empty m2.menuItem}" >                                                   
                                         <div class="menuItem menutipo#{m2.tipo}" >                                         
                                            
                                            #{m2.nombre}  
                                         </div>
                                       </h:outputLink>                                       

                                       <!-- Menu principal-->
                                       <h:panelGroup rendered="#{not empty m2.menuItem}" styleClass="menuPrincipal#{m2.nivel}" >                                                        
                                           #{m2.nombre}  
                                       </h:panelGroup>                                                      

                                       <ui:repeat value="#{m2.menuItem}" var="m3">

                                           <!-- Menu item-->
                                           <h:outputLink  value="#{m3.url}.jsf" target="_blank" rendered="#{empty m3.menuItem}" >                                                   
                                               <div class="menuItem menutipo#{m3.tipo}" >                                         
                                                   
                                                   #{m3.nombre}  
                                                   
                                               </div>
                                           </h:outputLink>

                                           <!-- Menu principal-->
                                           <h:panelGroup rendered="#{not empty m3.menuItem}" styleClass="menuPrincipal#{m3.nivel}" >                                                        
                                               #{m3.nombre}  
                                           </h:panelGroup> 

                                           <ui:repeat value="#{m3.menuItem}" var="m4">

                                               <!-- Menu item-->
                                               <h:outputLink  value="#{m4.url}.jsf" target="_blank" rendered="#{empty m4.menuItem}" >                                                   
                                                   <div class="menuItem menutipo#{m4.tipo}" >                                                         
                                                       
                                                       #{m4.nombre}  
                                                       
                                                   </div>
                                               </h:outputLink>
                                               <!-- Menu principal-->
                                               <h:panelGroup rendered="#{not empty m4.menuItem}" styleClass="menuPrincipal#{m4.nivel}" >                                                        
                                                   
                                                   #{m4.nombre}  
                                               </h:panelGroup> 

                                           </ui:repeat>

                                        </ui:repeat>

                                    </ui:repeat>

                                </p:tab>                        
                            </p:accordionPanel>                        

                        </p:tab>                
                    </p:tabView>
                
                </p:tab>           
            
        </h:form>
        
    </ui:define>

</ui:composition>
</html>
